<template>
<div>
    <card style="text-align:left;position:relative;">
        <p slot="title">学生信息</p>
        <a v-if="taskInfoData.status!='CLOSED'" slot="extra"><Icon type="android-call" color="#19be6b" size="25" @click.native="reCall"></Icon></a>
        <userInfo :data="taskInfoData"></userInfo>    
    </card>  
    <card style="text-align:left;margin-top:10px;">
        <p slot="title">工单信息</p>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="120">
            <FormItem label="建单人：">{{taskInfoData.creatorName}}</FormItem>
            <FormItem label="来电号码：">{{taskInfoData.telNo | getHiddenText}}</FormItem>
            <FormItem label="工单内容：">{{taskInfoData.description}}</FormItem>
            <FormItem label="回复实效：">{{taskInfoData.deadTime}}小时</FormItem>
            <FormItem label="问题类型：">{{taskInfoData.levelOne}}-{{taskInfoData.levelTwo}}-{{taskInfoData.levelThree}}-{{taskInfoData.levelFour}}</FormItem>
            <FormItem label="工单状态：">{{taskInfoData.statusTxt}}</FormItem>
            <FormItem label="工单是否存在错误：" v-if="taskInfoData.status!='CLOSED' &&  taskPendingFlag">
                <RadioGroup v-model="formValidate.errorFlag" @on-change="radioChange">
                    <Radio label="true" :disabled="taskInfoData.status!='OPEN'">是</Radio>
                    <Radio label="false" :disabled="taskInfoData.status!='OPEN'">否</Radio>
                </RadioGroup>
            </FormItem>
            <Form-item label="处理次数：" prop="resolveCount">
                <span v-if="isShow">{{taskInfoData.resolveCount}}</span>
                <i-select v-else v-model="formValidate.resolveCount" placeholder="" style="width:120px" @on-change="reuqireResultCount">
                    <i-option v-for="item in selectResolveCount" v-bind:value="item" v-bind:key="item">{{item}}</i-option>
                </i-select>
                <Button type="primary" size="small" v-if="isShow" @click="editCount">修改</Button>
            </Form-item>
           
            <FormItem label="工单是否存在错误：" v-if="taskUntreatedFlag && taskInfoData.status!='CLOSED'">
                <RadioGroup v-model="taskInfoData.errorFlag" @on-change="radioChange">
                    <Radio label="true">是</Radio>
                    <Radio label="false" disabled>否</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="错误备注：" v-if="taskPendingFlag"  v-show="isShowWrongNote || formValidate.errorFlag == 'true'" style="width:50%;">
                    <Input type="textarea" :disabled="taskInfoData.status!='OPEN'" v-model="formValidate.errorInfo" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
            <FormItem label="错误备注：" v-if="taskUntreatedFlag && taskInfoData.status!='CLOSED'" style="width:50%;">
                    <Input type="textarea" disabled v-model="taskInfoData.errorInfo" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
            <FormItem label="内容备注：" prop="remark" style="width:50%;"  v-if="taskInfoData.status!='CLOSED' && !myTaskFlag && !taskManageFlag">
                <Input type="textarea" v-model="formValidate.remark" :autosize="{minRows: 2,maxRows: 5}"></Input>
            </FormItem>
            <FormItem style="margin-top:20px;" v-if="taskInfoData.status!='CLOSED' && taskPendingFlag ">
                 <Button type="primary" @click="showAssignTaskDiv">派单</Button>
             </FormItem>
            <FormItem style="margin-top:20px;" v-if="isAppend && taskInfoData.status!='CLOSED' && !myTaskFlag && !taskPendingFlag">
                <Button type="primary" @click="appendContentToTask">追加</Button>
            </FormItem>
            <FormItem style="margin-top:20px;" v-else-if="taskInfoData.status!='CLOSED' && taskUntreatedFlag">
                    <Button type="success" @click="showFlowTask">流转</Button>
                    <Button type="info" style="margin-left: 8px" @click="doStashTask" >保存内部备注</Button>
                    <!-- <Poptip
                    confirm
                    title="您确认完结该工单吗？"
                    @on-ok="doFinshTask">
                    <Button type="primary" style="margin-left: 8px" @click="confirmBoxShow">完结</Button>
                    </Poptip> -->
                    <Button type="primary" style="margin-left: 8px" @click="confirmBoxShow">完结</Button>
                </FormItem>
            <!-- <FormItem style="margin-top:20px;" v-else-if="taskInfoData.status!='CLOSED' && taskManageFlag">
                <Button type="primary" @click="modal1 =true">派单</Button>
                <Button type="success" @click="showFlowTask">流转</Button>
                <Button type="info" style="margin-left: 8px" @click="doStashTask" >保存内部备注</Button>
                <Poptip
                confirm
                title="您确认完结该工单吗？"
                @on-ok="doFinshTask"
                @on-cancel="cancel">
                <Button type="primary" style="margin-left: 8px">完结</Button>
            </Poptip>
            </FormItem> -->
        </Form>
        <div style="text-align:left;margin-top:30px;border-top:solid 1px #eaeaea;padding-top:20px;">
            <Timeline class="resetCss">
                <TimelineItem v-for="item in taskLogList" v-bind:key="item.content">
                    
                    <div class="lc-box">
                        
                        <div class="t">
                            <div class="triangle_border_left">
                                <span></span>
                            </div>
                            <span>{{item.operatorName}} </span>
                            <span class="ml-10">[{{item.operatorGroupName}}]</span>
                            <span class="f-right">{{item.timeStamp}} </span>
                        </div>
                        <div class="lc-title">
                            <span class="self-icon">{{item.type}}</span>
                            <span class="lc-con">{{item.content}}</span>
                            
                        </div>
                        
                    </div>
                </TimelineItem>
            </Timeline>
        </div>
    </card> 
    <Modal  v-model="untreatedTaskBox" title="工单提示"  width="400" >
      <p slot="header" style="color:#495060;">
            <span>工单提示</span>
        </p>
        <div style="text-align:center">
            <span v-if="untreatedTaskCount" style="font-weight:600">当前还有<span style="color:red;font-size:16px;">{{untreatedTaskCount}}</span>工单未处理</span>
            <span v-if="!untreatedTaskCount" style="font-weight:600">所有工单已处理完毕</span>
        </div>
        <div slot="footer">
            <Button type="info" size="large"  @click="del">确定</Button>
        </div>
    </Modal> 
</div> 
</template>
<style scoped>
    .ml-10 {
        margin-left: 10px;
    }
    
    .ivu-form-item {
        margin-bottom: 5px;
    }
    
    .lc-box {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 500px;
    }
    
    .lc-box .lc-title {
        display: flex;
        height: 35px;
        background: #eaeaea;
        border-radius: 0 3px 3px 0;
        align-items: center;
        padding-right: 20px;
        box-shadow: 1px 1px #d3d3d3;
    }
    
    .t {
        padding: 0 5px;
        line-height: 25px;
    }
    
    .f-right {
        float: right;
    }
    
    .lc-con {
        padding: 5px;
        margin-left: 20px;
    }
    
    .self-icon {
        border-radius: 3px 0 0 3px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        font-size: 12px;
        background: #4096f1;
        color: #fff;
    }
    
    .triangle_border_left {
        width: 0;
        height: 0;
        border-width: 5px 5px 5px 0;
        border-style: solid;
        border-color: transparent #4096f1 transparent transparent;
        position: absolute;
        margin-left: -10px;
        margin-top: 33px;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import userInfo from 'components/user/userInfo.vue'
    import userService from 'service/userService.js'
    import taskService from 'service/taskService.js'
    import flowTaskAction from './flowTask'
    import assignTaskAction from './assignTask'
    import domAction from '@/libs/dom.js'
    import {
        formatDate,
        getAge,
        getAddressList,
        getHiddenText
    } from '@/libs/filter.js'
    import configService from 'service/configService.js'

    export default {
        name: 'taskdetail',
        props: {
            data: Object,
        },
        data() {
            return {
                modal1: false,
                selectResolveCount:["1","2","3"],
                isShow:true,
                resolveCount:'',
                options: {
                    handlerGroupOptionList: [],
                    handlerOptionList: [],
                },
                taskId: '',
                untreatedTaskCount: '0',
                untreatedTaskBox: false,
                isAppend: false,
                isShowWrongNote: false,

                formValidate: {
                    "errorFlag": "false",
                    "errorInfo": "",
                    "remark": '',

                    "nextHandlerGroupId": '',
                    "nextHandlerGroupName": '',
                    "nextHandlerName": '',
                    "nextHandlerId": '',
                },
                ruleValidate: {},
                taskInfoData: {},
                taskLogList: [],
                myTaskFlag: false,
                taskPendingFlag: false,
                taskUntreatedFlag: false,
                taskManageFlag: false,
                trueFlag: true,
                errorFlag: false,
            }
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo',
                callUserInfo: 'callUserInfo',
                untreatedNum: 'untreatedNum',

            })
        },
        components: {
            userInfo
        },
        filters: {
            getHiddenText(mobile) {
                return getHiddenText(mobile)
            }
        },
        watch: {
            '$route' (to) {
                if (to.path.indexOf('taskdetail') > -1) {
                    let taskId = to.query.id,
                        action_type = to.query.action_type
                    this.getData(taskId, action_type)
                }

            }
        },
        created() {
            let taskId = this.$route.query.id
            let action_type = this.$route.query.action_type ? this.$route.query.action_type : ''
            this.getData(taskId, action_type)
            this.$store.dispatch('getLoginUserInfo')


        },
        methods: {
            getData(taskId, action_type) {
                this.taskId = taskId
                this.isAppend = false
                this.myTaskFlag = false
                this.taskPendingFlag = false
                this.taskUntreatedFlag = false
                this.taskManageFlag = false
                if (action_type == 'append') {
                    this.isAppend = true
                } else if (action_type == 'taskMine') {
                    this.myTaskFlag = true
                } else if (action_type == 'taskPending') {
                    this.taskPendingFlag = true
                } else if (action_type == 'taskUntreated') {
                    this.taskUntreatedFlag = true
                } else if (action_type == 'taskManage') {
                    this.taskManageFlag = true
                }
                this.getTaskInfo(taskId)
                this.getTaskLogList(taskId)

            },
            //追加
            appendContentToTask() {
                if (!this.formValidate.remark) {
                    this.$Message.warning('请先填写内容备注');
                    return false
                }
                this.$refs['formValidate'].validate(async(valid) => {
                    if (valid) { //验证成功
                        let data = Object.assign(this.formValidate, {
                            "ticketId": this.taskId,
                            "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                            "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                            "curHandlerName": this.loginUserInfo.curHandlerName,
                            "curHandlerId": this.loginUserInfo.curHandlerId
                        })
                        let jsondata = await taskService.appendContentToTask(data)
                        if (jsondata.state) {
                            this.getTaskLogList(this.taskId)
                            this.$Message.success('追加成功');
                        } else {
                            this.$Message.warning('追加失败');
                        }
                    }
                })
            },
            //工单详情
            async getTaskInfo(id) {
                let jsondata = await taskService.getTaskInfo({
                    id: id
                })
                if (jsondata.state) {
                    jsondata.data.errorFlag = (jsondata.data.errorFlag).toString()
                    this.formValidate.errorFlag = jsondata.data.errorFlag
                    this.formValidate.errorInfo = jsondata.data.errorInfo
                    jsondata.data.statusTxt = this.Func.getChineseTaskStatus(jsondata.data.status)
                    jsondata.data.resolveCount = jsondata.data.resolveCount;
                    if(!jsondata.data.resolveCount){
                        jsondata.data.resolveCount =="0";
                    }

                    this.taskInfoData = jsondata.data
                    console.log("-----/",this.taskInfoData)
                }
            },
            //工单log
            async getTaskLogList(ticketId) {
                let jsondata = await taskService.getTaskLogList({
                    ticketId: ticketId
                })
                if (jsondata.state) {
                    this.taskLogList = jsondata.data
                    console.log("--.", jsondata.data);
                }
            },
            radioChange(value) {
                if (value == 'false') {
                    this.isShowWrongNote = false
                } else {
                    this.isShowWrongNote = true
                }

            },
            //显示工单流转弹层
            showFlowTask() {
                let data = Object.assign({
                    'content': this.formValidate.remark,
                    'propId': this.taskId,
                    'type': 'flow'
                }, this.formValidate)
                flowTaskAction.showFlowTask({
                    'data': data,
                    'remove': flowTaskAction.remove,
                    'getTaskLogList': this.getTaskLogList
                })
            },
            //完结 工单
            async doFinshTask() {
                let data = {
                    "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                    "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                    "curHandlerName": this.loginUserInfo.curHandlerName,
                    "curHandlerId": this.loginUserInfo.curHandlerId,
                    "remark": this.formValidate.remark,
                    "ticketId": this.taskId
                }

                let jsondata = await taskService.finshTask(data)

                if (jsondata.state) {
                    this.$Message.success(jsondata.msg)
                    this.$nextTick(function() {
                        this.getTaskInfo(this.taskId)
                    })
                    this.getTaskLogList(this.taskId)
                        //查询剩余待处理工单
                    let handlerId = this.loginUserInfo.curHandlerId;
                    let dataObj = {
                        "page": 0,
                        "size": 10000,
                    }
                    let taskdata = await taskService.taskUntreatedList(dataObj, handlerId);
                    if (taskdata.state) {
                        this.untreatedTaskCount = taskdata.data.totalElements;
                        this.$store.dispatch('changeuntreatedNum', this.untreatedTaskCount)
                        this.untreatedTaskBox = true;
                    }
                } else {
                    this.$Message.warning(jsondata.msg)
                }

            },
            //暂存 工单
            async doStashTask() {
                let data = {
                    "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                    "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                    "curHandlerName": this.loginUserInfo.curHandlerName,
                    "curHandlerId": this.loginUserInfo.curHandlerId,
                    "remark": this.formValidate.remark,
                    "ticketId": this.taskId
                }

                let jsondata = await taskService.stashTask(data)

                if (jsondata.state) {
                    this.$Message.success(jsondata.msg)
                    this.getTaskLogList(this.taskId)
                } else {
                    this.$Message.warning(jsondata.msg)
                }
            },
            // 显示 派单 弹层
            showAssignTaskDiv() {
                let data = {
                    'propId': this.taskId,
                    "remark": this.formValidate.remark,
                    "errorFlag": this.formValidate.errorFlag,
                    "errorInfo": this.formValidate.errorInfo,
                }
                assignTaskAction.showAssignTask({
                    'data': data,
                    'remove': assignTaskAction.remove,
                    'getTaskLogList': this.getTaskLogList
                })

            },
            //确认工单是否完结
            confirmBoxShow() {
                if (!this.formValidate.remark) {
                    this.$Message.warning('请先填写内容备注');
                    return false
                }
                this.$Modal.confirm({
                    title: '您确认完结该工单吗？',
                    content: '<p>完结工单之后无法恢复工单</p>',
                    onOk: () => {
                        this.doFinshTask();
                    },
                    onCancel: () => {

                    }
                });
            },
            //回拨
            async reCall() {
                let callNo = this.taskInfoData.telNo
                this.$store.dispatch('fun_reCallNum', callNo)



                this.$store.dispatch('setCacheExcludeComponentName', ['voiceCall'])
                this.$store.dispatch('removePageTags', {
                    'path': '/voicecall'
                })

                let updateTagObj = {
                    path: '/voicecall?studentId=' + this.taskInfoData.stuId + '&from=callout',
                    is_nav: false,
                    title: '外呼弹屏-' + this.taskInfoData.stuName,
                    name: 'voicecall_index',
                    children: []
                }

                this.$store.dispatch('recordDetailPageTags', updateTagObj)


                this.$router.push({
                    path: 'voicecall',
                    query: {
                        'studentId': this.taskInfoData.stuId,
                        'from': 'callout'
                    }
                });
            },
            //删除工单弹层
            del() {
                this.untreatedTaskBox = false;
            },
            editCount(){
                this.isShow = !this.isShow;
                console.log(1111);
            },
            //回复次数
            async reuqireResultCount(count){
                this.formValidate.resultCount  = count;
                let data = {
                    "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                    "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                    "curHandlerId": this.loginUserInfo.curHandlerId,
                    "curHandlerName": this.loginUserInfo.curHandlerName,
                    "remark":this.formValidate.remark,
                    "resultCount":count,
                    "ticketId": this.taskId,
                }
                console.log("=/===",data);
                let jsondata = await taskService.resultCount(data)
                if (jsondata.state) {
                    this.$Message.success('成功');
                } else {
                    this.$Message.warning('失败');
                }
            }
        }
    }
</script>